
.compute
  display: flex
  flex-direction: column
  width: 100vw
  height: 100vh

.result
  flex: 1
  display: flex
  flex-direction: column
  justify-content: end
  align-items: end
  line-height: 50rem
  padding: 0 2vw
  font-size: 40rem
  width: 100%
  overflow: hidden
  .formvalue,
  .fin
    width: 100%
    white-space: nowrap
    text-overflow: ellipsis
    overflow: hidden
    text-align: right
    transition: all .3s ease
  .formvalue
    display: flex
    justify-content: end
  .fin
    padding-bottom: 40rem
    font-size: 24rem
    color: #999
    min-height: 90rem
  .value
    color: #666
  .form
    color: tomato
  .finished
    font-size: 40rem
    color: #666
  .complate
    font-size: 24rem
    color: #999

.keys
  display: grid
  grid-template-columns: 20vw 20vw 20vw 20vw
  grid-template-rows: 20vw 20vw 20vw 20vw 20vw
  justify-content: space-evenly
  grid-row-gap: 10rem
  padding-bottom: 10rem
  div
    text-align: center
    line-height: 20vw
    background: #f1f1f1
    border-radius: 50%
    font-weight: 560
    font-size: 24rem
    color: #666
    cursor: pointer
    user-select: none
  div:nth-child(4n + 4)
    background: #ffb6c254
    font-size: 40rem
    color: tomato
    font-weight: normal
  div:not(:nth-child(n + 4))
    color: tomato
    font-weight: normal
  div:last-child
    background: tomato
    color: #fff
  div:active
    filter: brightness(0.8)

.del
  font-size: 40rem !important
  line-height: 16vw !important

